<template>
  <div id="watch">
    <p>数组</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
    <!-- <p>{{list[0][0]}}</p> -->

    <!-- <p>对象</p> -->

    <!-- <ul>
      <li v-for="(item,index) in obj" :key="index">{{obj[item]}}</li>
    </ul>-->
    <!-- <p>{{list[0][0]}}</p> -->

    <button @click="update">更新</button>
  </div>
</template>
<script>
export default {
  name: "watch",
  data() {
    return {
      list: [[2], 1, 2, 3, 4]
    };
  },
  methods: {
    update() {
      console.log("this.list[0][0]", this.list[0][0]);

      const { list } = this
      list[0][0] = Math.random() * 5;
      // this.$forceUpdate();

      this.list = list;

      // 可以自动触发监听
      // this.list[0].push(Math.random() * 5);

      // 可以触发跟新如果两次值一样就不会走watch
      // this.$set(this.list, this.list);

      console.log("this.list[0][0]", this.list[0][0]);
    }
  },
  watch: {
    list: {
      handler: function(n, o) {
        console.log("监听到变化");
      },
      deep: true
    }
  }
};
</script>
<style scoped lang='less'>
</style>